<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .con{
        width: 700px;
        height: 500px;
        background-color: rgb(129, 212, 245);
        margin: 50px auto;
    }
    .word{
        font-size: 100px;
        text-align: center;
    }
    .rate{
        width: 100%;
        height: 30px;
        margin-top: 100px;
        /* background-color: lightblue; */
        display: inline-block;
        text-align: center;
    }
    span{
        font-size: 50px;
    }
</style>
<body>
    <div class="con">
        <p class="word"></p>
        <div class="rate">
            <span>答对</span>
            <span class="win">0</span>
            <span>答错</span>
            <span class="def">0</span>
            <span>准确率</span>
            <span class="tur">0%</span>
        </div>
    </div>
    <script>
        var arr = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
        var word = document.querySelector('.word');
        var x = Math.floor(Math.random() * arr.length);
        var win = document.querySelector('.win');
        var def = document.querySelector('.def');
        var tur = document.querySelector('.tur');
        word.innerHTML = arr[x];
         var count = 0;
         var count1 = 0;
          // onkeydown:按下键时触发。
          window.onkeydown = function(ev){
            console.log("按下了键盘");
            console.log(ev);
            console.log(ev.key);//获取按键的字符
            console.log(ev.keyCode);
            var j = word.innerHTML.charCodeAt();
            
            console.log(j);//获取按键的数字代码
            if(ev.keyCode == j){
                x = Math.floor(Math.random() * arr.length);
                word.innerHTML = arr[x];
                count++;
                win.innerHTML = count;
            }
            if(ev.keyCode != j){
                x = Math.floor(Math.random() * arr.length);
                word.innerHTML = arr[x];
                count1++;
                def.innerHTML = count1;
            }
            if(count1 == 0){
                tur.innerHTML = 100 + '%';
            }else if(count == 0){
                tur.innerHTML = 0 + '%';
            }
            else{
                 var sum = count/(count+count1)*100;
                 sum = sum . toFixed(2) + '%';
                 tur.innerHTML = sum;
            }
           
        }

    </script>
</body>
</html>